<!--
 * @Author: lsp<286212824@qq.com>
 * @Date: 2020-07-10 22:42:20
 * @LastEditTime: 2020-07-10 23:10:43
 * @Description: file content
--> 
<template>
  <div class="myAssetsHome">
    <header-btn  :btnList='record_list_data' :tabIndex='tabIndex' @changetabIndex='tabIndexChange'>
      <el-select class="select" @change='getDataFn' v-model="dept" placeholder="请选择" size='medium'   style="margin:17px 6px 0 0" v-show="allMyDept&&allMyDept.length>1">
        <el-option   v-for="item in allMyDept"  :key="item.dept_id"  :label="item.department_name" :value="item.dept_id"></el-option>
      </el-select>
    </header-btn>
    <!-- 记录列表 -->
    <div class="myAssetsContent" v-if="tabIndex==0">
        <HeadSearchBox />
        <div class="table-vue">
            <lpj-table-vue :baseNum='paginationMes.per_page*(paginationMes.current_page-1)'  :tableHeaderData="tableHeaderData" :tableData="tableData"></lpj-table-vue>
        </div>
        <pagination align="right" v-if="paginationMes.total&&paginationMes.total>10"  :paginationMes="paginationMes" @sizeChangeFn="sizeChangeFn" @currentChangeFn="currentChangeFn"></pagination>
    </div>
    <!-- 报表 -->
    <report-form ref="reportForm" :dept='dept'  v-if="tabIndex==1"></report-form>
  </div>
</template>
<script>
/* eslint-disable */
import {getDeptConsumablesList} from "./api"
import Pagination from "@/components/Pagination"
import LpjTableVue from "@/components/LpjTableVue"
import headerBtn from "@/components/headerBtn"
import reportForm from "./components/reportForm"
import constObj from '@/config/const' /**表头常数 */
import HeadSearchBox from '@/components/HeadSearchBox' /*头部搜索*/
export default {
  name: "myAssets",
  components:{ Pagination, LpjTableVue,headerBtn,reportForm,HeadSearchBox },
  data() {
    return {
      dept:'',/**部门 */
      allMyDept:[],/*我的全部部门 */
      /**头部记录信息 */
      record_list_data:[
         {num:'',content:'部门耗材'},
		 {num:'',content:'部门耗材报表'},
	  ],
      tabIndex:0,
      tableHeaderData:constObj.tableHeaderOfmyMeterials,
      tableData:[],/*table里的数据 */
      paginationMes:{per_page:10,current_page:1,totol:0}, /*分页 数据*/
      assetsDataList:[{}], /**耗材数据 */
    };
  },
  created() {
    this.tabIndex = Number(localStorage.curTabIndex||0)
    this.allMyDept = this.$store.state.users.department||[]
    this.dept = this.allMyDept[0].dept_id
    this.tabIndex==0?this.getDataFn():''
  },
  methods: {
    /**根据获取用户全部部门 */
    getUserDeptFn(){
        getDepartmentsApi().then(data=>{
            this.allMyDept = data
            if(data.length==1){
                this.dept = data[0].id 
            }
        })
    },
    tabIndexChange(index){
      this.tabIndex = index
      localStorage.curTabIndex = index
      this.tabIndex==0?this.getDataFn():''
    },
    /**获取耗材数据 */
    getDataFn(){
        switch(this.tabIndex){
          case 0: 
            getDeptConsumablesList({num:this.paginationMes.per_page,page:this.paginationMes.current_page,dept_id:this.dept}).then(res=>{
              this.paginationMes = {total:Number(res.total),per_page:Number(res.per_page),current_page:Number(res.current_page)}
              this.tableData = res.data
            })
            break; //领用
          case 1: 
            this.$refs.reportForm.getData(this.dept)
            break; //报表
        } 
    },
    sizeChangeFn(val){
          this.paginationMes.current_page = 1
          this.paginationMes.per_page = val
          this.getDataFn()
    },
    currentChangeFn(val){
          this.paginationMes.current_page = val
          this.getDataFn()
    },
  }
};
</script>
<style lang="stylus" scoped>
.myAssetsHome
  font-family "SourceHanSansCN-Regular"
  height 100%
  font-size 14px
  color #303133 
  .select
    >>>input
     width: 150px;
     height: 30px;
   >>>i
     line-height 30px
  .myAssetsContent
    margin 10px 0
    background-color #fff
    padding 30px
</style>